<template id="classification">
    <div>
        <div class="class_fic">
            <v-search></v-search>
           <div class="kp_w">
                <div class="search_fen">
                    <div v-for="(v,index) in classFruit">
                        <span @click="catSwitch(v.id,index)" v-bind:class="parent_id == v.id ? 'catSelected' : ''">{{v.name}}</span>
                    </div>
                </div>
                <!--结尾-->
               <div class="classification_end">
                   <div class="classification_end_1">
                      {{name_k}}
                   </div>
                <div v-for="v in classFruit" class="classification_right">
                <div class="fruits1_con" v-bind:style="v.id != parent_id?styleC:''">
                    <ul>
                        <li @click="getSearch(a.id)" v-for="a in v.children "><img :src="a.img_path" alt=""><span>{{a.name}}</span></li>
                    </ul>
                </div>
               </div>
               </div>
            </div>
        </div>
        <!--2-->
        <v-footer></v-footer>
    </div>
</template>
<script>
    import search from './search.vue';
    import footer from './footer.vue';
    export default {
        name:'classification',
        data(){
            return{
                datetime_data:[],
                classFruit:[],
                styleC:{
                    display:'none'
                },
                parent_id:'',
                name_k:'',
            }
        },
        components:{
            'v-search':search,
            'v-footer':footer
        },
        mounted:function(){
           /* /!*测试的容器*!/
            let h=$(window).height()-90;
            $('.class_fic').height(h)*/
            this.$http.jsonp(
                this.GLOBAL.BaseUrl+'/mobile/api/v1/Flow.php?mode=getDeliverTime',
                {
                    jsonp:'callback'
                }
            ).then(function (res) {
                this.datetime_data = res.body.data.deliver_time;
            });

            this.$http.jsonp(this.GLOBAL.BaseUrl+'/mobile/api/v1/Goods.php?mode=classify',
                {
                    jsonp:'callback',
                }).then(function(res){
                this.classFruit = res.body.data.cat_list;
                this.parent_id = res.body.data.cat_list[0].id;
                this.name_k=this.classFruit[0].name
            })
        },
        methods:{
            catSwitch:function(id,index){
                this.parent_id = id;
                this.name_k=this.classFruit[index].name
               /* alert(index)
                alert(id)*/
            },
            getSearch:function(id){
                this.$router.push('/list?cat_id='+id);
            }
        }
    }
</script>
<style>
    .classification_end_1{
        width:4.8rem;
        height:0.67rem;
        line-height:0.67rem;
        text-align:center;
        font-size:0.26rem;
        color:#3b3b3b;
    }
    .classification_end{
        height:100%;
        width:4.8rem;
        float:right;
        padding-top:0.3rem;
    }
    .kp_w{
        height:100%;
        width:100%;
        border-top:0.01rem solid #f0f0f0;
    }
    .classification_right{
        float:right;
        width:4.8rem;
        height:100%;
    }
   /*--------------------*/
    .class_fic{
        overflow-x: hidden;


    }
    .fruits1_con{
        min-height:3rem;
        width:100%;
    }
    .fruits1_con ul{
        width:100%;
        min-height:3rem;
        display:flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .fruits1_con ul li{
        list-style:none;
        width:1.6rem;
      /*  flex:1;*/
        margin:0.4rem 0 0 0;
    }
    .fruits1_con ul li img{
        height:0.94rem;
        width:1.6rem;
    }
    .fruits1_con ul li span{
        display:block;
        font-size:0.2rem;
        color:#afafaf;
        height:0.2rem;
        width:1.63rem;
        text-align:center;
        line-height:0.2rem;
    }
    /*11*/
.search_fen{
    width: 1.5rem;
    height: 7.6rem;
    padding-top:0.4rem;
    border-right:1px solid #f0f0f0;
    float:left;

}
.search_fen div{
    height:0.8rem;
    display:flex;
    margin:0 auto;
}
.search_fen div span{
    flex:1;
    font-size:0.26rem;
    color:#333;
    display:block;
    text-decoration:none;
    height:0.6rem;
    line-height:0.6rem;
    justify-content: center;
    width:1.55rem;
    text-align:center;
}
.search_fen .catSelected{
        color: #43b4fc;
        border-left:0.09rem solid #43b4fc;
    }

</style>
